body {
			font-family:verdana;
			background-color: rgba(255,255,224,0.2);
			}
h1 {
		text-align:center;
		background-color:rgba(230,230,0,0.5);
		/* font-family: calibri; */
		border-width: 3px 0 3px 0;
		border-style:solid;
		border-color:rgba(204,204,0,1);
		/* max-width:50%; */
		line-height:130%;
}
h2 {
		text-align:center;
		background-color:rgba(255,195,77,1);
				/* background-color:rgba(255,195,77,1); */
		/* font-family: calibri; */
		font-size:1.5em;
		/* border-width: 4px 0 4px 0; */
		/* border-style:solid; */
		/* border-color:rgba(204,204,0,1); */
		/* line-height:200%; */
}
/* ============================== BUTTONs ========================= */
button{
	color:rgba(255,255,255,1);
	background-color:rgba(0,100,150,0.6);
	padding:1% 1%;
	border-radius:15px;
}

.button_test{
	color:rgba(255,255,255,1);
	background-color:rgba(0,100,150,0.5);
	border-radius:30px;
}

button:hover {
	background-color:rgba(0,102,150,1);
}

button:focus {
	background-color:rgba(0,102,150,1);
}

.button_petit{
	color:rgba(255,255,255,1);
	background-color:rgba(0,100,150,0.6);
		/* background-color:green; */
	padding:0% 0%;
	border-radius:0px;
	/* height:13px; */
	font-size:13px;
	width:154px;
}

#fin{
	font-size:x-large;
	font-weight:bold;
	width:5em;
	height:3em;
}

.efface{
	background-image:url("image gomme.png");
	color:black;
	height:50px;
	width:50px;
}

.flechedroite{
	background-image:url("image fleche-droite.png");
	color:black;
	height:45px;
	width:100px;
	margin-top:1em;
}

.button_retourne{
	background-image:url("image retourne v2.png");
	/* background-repeat:no-repeat; */
	/* padding:0% 0%; */
	color:black;
	border:1px solid lightyellow;
	border-radius:0%;
	height:46px;
	width:46px;
	margin:0px 10px 0px 10px;
}
.button_recommence{
	background-image:url("image recommence v2.png");
	/* background-repeat:no-repeat; */
	/* padding:0% 0%; */
	color:black;
	border:1px solid lightyellow;
	border-radius:0%;
	height:45px;
	width:45px;
}

.justefaux {
  width: 3em;
  line-height:2.5em;
  font-weight:bold;
  font-size:1.2em;
  background-color: rgba(72,209,204,0.7); /* mediumturquoise */
  border-radius: 10%;
  display: inline-block;
  text-align:center;
  padding:0px;
  margin:0px 10px 0px 10px;
}

.radiobutton1{
	height:30px;
	width:30px;
	vertical-align: middle;
	/* background-color:red; */
}
.radiobutton1:hover{
	transform:scale(2.5,2.5);
}
.radiobutton1:after {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: palegreen;
        content: '';
        display: inline-block;
        /* visibility: visible; */
        border: 2px solid lightslategray;
    }
	
.radiobutton2{
	height:30px;
	width:30px;
	vertical-align: middle;
	/* background-color:red; */
}
.radiobutton2:hover{
	transform:scale(2.5,2.5);
}
.radiobutton2:after {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: rgb(255, 180, 153);
        content: '';
        display: inline-block;
        /* visibility: visible; */
        border: 2px solid lightslategray;
    }


/* ====================== Divers ==================*/
#corr_page{
	font-weight:bold;
	text-align:center;
}

.div_colonne {
			float:left;
			/* display:inline-block; */
			margin: 5px;
		}

.court_input{
	width:2em;
	height:2em;
	border: 1px solid rgba(0,140,205,0.5);
	font-size:100%;
	background-color:rgba(230,247,255,0.5);
	text-align:center;
	font-weight:bold;
	}

.court_input::placeholder{
	font-size: 1em;
	text-align:center;
	/* font-weight:bold; */
	/* line-height:100px; */
	/* height:100px; */
}
	
.rouge{
	font-weight:bold;
	color:indianred;
	/* background-color:rgba(225,150,100,0.5); */
}

.correc1{
	vertical-align:1.2em;
	display:inline-block;
	width:140px;
	text-align:left;
}

.correc2{
	padding:5px;
	display:inline-flex;
	justify-content:center;
	align-items:center;
}

 
/* ======================= links =========================*/
a{
	font-style:italic;
	color:peru;
}
a:hover{
	color:saddlebrown;
}

.arrow-pointer {
  width: 200px;
  background: skyblue;
  position: relative;
  display:block;
  text-align:center;
  line-height:50px;
  color:azure;
}

  .arrow-pointer:after {
    content: ' ';
    position: absolute;
    left: 0; bottom: 0; width: 0; height: 0;
    border-left: 25px solid white;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
  }

  .arrow-pointer:before {
    content: ' ';
    position: absolute;
    right: 0px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 25px solid skyblue;
    border-top: 25px solid white;
    border-bottom: 25px solid white;
  }
.arrow-pointer:hover{
	color:blue;
}
.arrow-pointer:active{
  color:indigo;
}


.arrow-pointer2 {
  width: 150px;
  line-height:60px;
  /* height: 60px; */
  color:azure;
  background: skyblue;
  position: relative;
  display:block;
  text-align:center;
  font-size:x-large;
  /* padding:50px 0; */
}

  .arrow-pointer2:after {
    content: ' ';
    position: absolute;
    left: 0; bottom: 0; width: 0; height: 0;
    border-left: 30px solid bisque;
    border-top:30px solid transparent;
    border-bottom: 30px solid transparent;
  }

  .arrow-pointer2:before {
    content: ' ';
    position: absolute;
    right: 0px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 30px solid skyblue;
    border-top: 30px solid bisque;
    border-bottom: 30px solid bisque;
  }
  .arrow-pointer2:hover{
	color:blue;
}
.arrow-pointer2:active{
  color:indigo;
}

/* ====================== GRID ========================= */
/* grid3 classes for 3 columns display ==============*/
.grid3-container {
  display: grid;
  grid-template-columns: 13% 74% 13%;
  grid-template-rows: auto auto;
  grid-gap: 0%;
  /* padding: 5px; */
}
.grid3-container  div {
  padding: 10px;
  font-size: 25px;
  text-align: center;
  display:flex;
  justify-content:center;
}

.grid3-corr{
  font-size: 30px;
  background-color:beige;
  /* grid-row:6; */
  grid-column:2/3;
}

.grid3-premiere {
  /* font-size: 20px; */
  background-color:lightyellow;
  text-align:center;
  grid-row:1;
  grid-column:2/3;
}
.grid3-exoligne-colvide-gauche{
	grid-row:1/8;
	writing-mode:vertical-lr;
	background-color:bisque;
}
.grid3-exoligne-colvide-droite{
	grid-row:1/8;
	grid-column:3;
	background-color: bisque;
	position:relative;  /*  ajouté dans exo D pour bon positionnement "page suivante" */
}

/* grid4 classes for 4 columns display ===============*/
.grid4-container {
  display: grid;
  grid-template-columns: 13% 37% 37% 13%;
  grid-template-rows: auto auto;
  grid-gap: 0%;
  /* padding: 5px; */
}
.grid4-container  div {
  padding: 5px;
  font-size: 25px;
  /* text-align: center; */
    /* background-color: rgba(255, 255, 255, 0.5); */
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
}

.grid4-corr {
  font-size: 30px;
  background-color:beige;
  grid-row:7; 	/* it was 6 */
  grid-column:2/4;
}

.grid4-premiere {
  /* font-size: 20px; */
  background-color:lightyellow;
  text-align:center;
  grid-row:1;
  grid-column:2/4;
}
.grid4-exoligne-colvide-gauche{
	grid-row:1/8; /* it was 1/7 */
	writing-mode:vertical-lr;
	background-color:bisque;
}
.grid4-exoligne-colvide-droite{
	grid-row:1/8; /* it was 1/7 */
	grid-column:4;
	position:relative;
	background-color: bisque;
}

.grid-grille1{
	/* grid-row:2; */
	/* grid-column:2; */
	background-color:ivory; 
}

.grid-grille2{
   /* grid-row:3; */
   /* grid-column:2; */
   background-color:cornsilk;
}

/* grid classes pour exercice E, 3 colonnes ===============*/
.gridE-container {
  display: grid;
  grid-template-columns: 13% 74% 13%;
  grid-template-rows: auto auto;
  grid-gap: 0%;
  /* padding: 5px; */
}
.gridE-container > div {
  padding: 20px;
  font-size: 25px;
  text-align: center;
}
.gridE-premiere {
  padding: 20px;
  font-size: 30px;
  background-color:lightyellow;
  grid-row:1;
  grid-column:2/3;
}
.gridE-exoligne-colvide-gauche{
	grid-row:1/6;
	writing-mode:vertical-lr;
	background-color:bisque;
}
.gridE-exoligne-colvide-droite{
	grid-row:1/6;
	grid-column:3;
	background-color: bisque;
	position:relative; /*  ajouté dans exo E pour bon positionnement "page suivante" */
}
.gridE-corr {
	padding:2px;
  font-size: 30px;
  background-color:beige;
  /* grid-row:4; */
  grid-column:2/3;
}

/*============== pour les lignes d'exercice dans les grids ===========*/
.grid-exo-1{
	/* grid-row:2; */
	/* grid-column:2; */
	   background-color:cornsilk;
	  text-align:center;
}
.grid-exo-2{
   /* grid-row:1; */
   /* grid-column:3; */
	background-color:ivory; 
   	  text-align:center;
}

/* initial grid classes, still in use (to be discontinued ideally)*/
.grid-container {
  display: grid;
  grid-template-columns: 10% 40% 40% 10%;
  grid-template-rows: auto auto;
  grid-gap: 0%;
  padding: 5px;
}

.grid-container > div {
  padding: 20px;
  font-size: 25px;
  text-align: left;
    /* background-color: rgba(255, 255, 255, 0.5); */
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
}

.grid-corr {
  padding: 20px;
  font-size: 30px;
  background-color:beige;
  grid-row:6;
  grid-column:2/4;
}

.grid-premiere {
  padding: 20px;
  font-size: 30px;
  background-color:lightyellow;
  grid-row:1;
  grid-column:2/4;
}

.grid-exoligne-gauche{
	grid-row:1;
	grid-column:2;
	background-color:ivory; 
}
.grid-exoligne-droite{
   grid-row:1;
   grid-column:3;
   background-color:cornsilk;
}
.grid-exoligne-colvide-gauche{
	grid-row:1/7;
	writing-mode:vertical-lr;
	background-color:bisque;
}
.grid-exoligne-colvide-droite{
	grid-row:1/7;
	grid-column:4;
	background-color: bisque;
}

/* ========================== Dominos ===================== */
.dot {
  height: 0.7em;
  width: 0.7em;
  background-color: tomato;
  border-radius: 50%;
  display: inline-block;
}

.dot_invisible {
  visibility:hidden;
  height: 0.7em;
  width: 0.7em;
  border-radius: 50%;
  display: inline-block;
}

.dot2 {
  height: 0.7em;
  width: 0.7em;
  background-color: tomato;
  border-radius: 50%;
  display: inline-block;
}
.dot2:hover{
	transform:scale(3,3);
}

.domino1{ 
	padding: 0px;
	margin:0px 10px 0px 10px;
	border-collapse: collapse;
	text-align:center;
	/* vertical-align:center; */
	/* border: 1px solid blue; */
	display:inline-block;
	}
.domino1 td{
  	padding:0px;
	margin:0px;
	width:1em;
		/* line-height:0.9em; */
	/* height:5px;	 */
}
.domino1 td:nth-child(1){ 
	border-left:1px solid black;
	}
.domino1 td:nth-child(3n){ 
	border-right:1px solid black;
	}
.domino1 tr:nth-child(1){ 
	border-top:1px solid black;
	}
.domino1 tr:nth-child(3){ 
	border-bottom:1px solid black;
	}


.domino2{ 					/* =========Scale larger on hover ========= */
	padding: 0px;
	margin:0px 10px 0px 10px;
	border-collapse: collapse;
	text-align:center;
	/* vertical-align:center; */
	/* border: 1px solid blue; */
	display:inline-block;
	}
.domino2:hover{
	transform:scale(1.3,1.3);
	}
.domino2 td{
  	padding:0px;
	margin:0px;
	width:1em;
	/* line-height:0.9em; */
	/* height:0.8em;	 */
}
.domino2 td:nth-child(1){ 
	border-left:1px solid black;
	}
.domino2 td:nth-child(3n){ 
	border-right:1px solid black;
	}
.domino2 tr:nth-child(1){ 
	border-top:1px solid black;
	}
.domino2 tr:nth-child(3){ 
	border-bottom:1px solid black;
	}

/* ======== domino pour exercice B ======= */
.domino3{ 
	padding: 0px;
	border-collapse: collapse;
	text-align:center;
	vertical-align:center;
	display:inline-block;
	}
.domino3 td{
  	padding:0px;
	width:25px;
	/* height:30px;	 */
}
.domino3 td:nth-child(1){ 
	border-left:1px solid black;
	/* display:inline-block; */
	}
.domino3 td:nth-child(3n){ 
	border-right:1px solid black;
	/* display:inline-block; */
	}
.domino3 tr:nth-child(1){ 
	border-top:1px solid black;
	/* display:inline-block; */
	}
.domino3 tr:nth-child(3){ 
	border-bottom:1px solid black;
	/* display:inline-block; */
	}

/* ======================= Dominos mystere ====================== */
.dominoA{ 
	/* padding: 1px; */
	border-collapse: collapse;
	text-align:center;
	vertical-align:bottom;
	border: none;
	display:inline-block;
	font-size:x-large;
	font-weight:900;
	color:mediumslateblue;
	}
.dominoA td{
  	width:30px;
}
.dominoA td:nth-child(1){ 
	border-left:5px solid mediumslateblue;
	}
.dominoA td:nth-child(3n){ 
	border-right:5px solid mediumslateblue;
	}
.dominoA tr:nth-child(1){ 
	border-top:5px solid mediumslateblue;
	}
.dominoA tr:nth-child(3){ 
	border-bottom:5px solid mediumslateblue;
	}

.dominoB{ 
	/* padding: 1px; */
	border-collapse: collapse;
	text-align:center;
	vertical-align:bottom;
	border: none;
	display:inline-block;
	font-size:x-large;
	font-weight:900;
	color:deeppink;
	}
.dominoB td{
  	width:30px;
	/* height:30px;	 */
}
.dominoB td:nth-child(1){ 
	border-left:5px solid deeppink;
	/* display:inline-block; */
	}
.dominoB td:nth-child(3n){ 
	border-right:5px solid deeppink;
	/* display:inline-block; */
	}
.dominoB tr:nth-child(1){ 
	border-top:5px solid deeppink;
	/* display:inline-block; */
	}
.dominoB tr:nth-child(3){ 
	border-bottom:5px solid deeppink;
	/* display:inline-block; */
}
/* .case{ */
	/* display:inline-block; */
	/* font-size:3em; */
	/* font-weight:900; */
	/* border: 5px solid gray; */
	/* line-height:100px; */
	/* width:100px; */
/* } */
.case_op{
	display:inline-block;
	font-size:2em;
	font-weight:900;
}
.case_correction{
	display:inline-block;
	font-size:1em;
	font-weight:300;
}
.case_rose{
	display:inline-block;
	font-size:2em;
	font-weight:900;
	border: 5px solid deeppink;
	color:deeppink;
	line-height:100px;
	width:100px;
}
.case_bleue{
	display:inline-block;
	font-size:2em;
	font-weight:900;
	border: 5px solid mediumslateblue;
	color:mediumslateblue;
	line-height:100px;
	width:100px;
}

/* ================= Barquettes ===============*/
.barquette2_B{ 
border:2px dashed lightslategray;
border-radius:10%;
/* border-style: solid; border-width:1px; */
	border-collapse: collapse;
	text-align:center;
	display:inline-block;
	/* transform: scale(0.8,0.8); */
	}
/* .barquette2_B:hover{  */
	/* transform: scale(1.8,1.8); */
	/* } */
.barquette2_B td{
	width:3em;
	padding-top:4px;
	padding-bottom:2px;
}

/* ============================ Grille exercices ==================== */
.grille1{
	border: 1px solid transparent;
	border-collapse: collapse;
	width:65%;
	text-align:center;
	font-size:xx-large;
	position:relative;
	/* left:20%; */
}

.grille1 tr{
	border:1px dotted peru;
	height:60px;
}
.grille1 tr:nth-child(3){
	border-top:3px solid peru;
	font-weight:bold;
}
.grille1 td{
	border-right:1px solid saddlebrown;
	width:15%;
	padding-top:4px;
}

.grille1 td:nth-child(1){
	/* border-right:1px solid gray; */
	width:25%;
	/* padding:5px; */
	text-align:right;
}

.grille_input{
	width:2em;
	height:1em;
	border: 1px solid rgba(0,140,205,0.5);
	font-size:100%;
	background-color:rgba(230,247,255,0.5);
	text-align:center;
	}	
/* =================== Elements a deplacer ==================== */
.adeplacer {
  width: 3em;
  line-height:2.5em;
  font-weight:bold;
  background-color: rgba(72,209,204,0.7); /* mediumturquoise */
  border-radius: 10%;
  display: inline-block;
  text-align:center;
  padding:10px;
  margin:0px 10px 0px 10px;
}
.adeplacer:hover {
  transform:scale(1.3,1.3);
  /* width: 2em; */
  /* background-color: rgba(72,209,204,0.7); */
  /* border-radius: 10%; */
  /* display: inline-block; */
  /* text-align:center; */
  /* padding:10px; */
  /* margin:0px 10px 0px 10px; */
}

.inputF{
	width:2em;
	line-height:2em;
	font-size:1em;
	font-weight:bold;
	background-color:rgba(230,247,255,0.5);
	text-align:center;
	border: 1px solid rgba(0,140,205,0.5);
	border-radius: 10%;
	padding:10px;
	}

#inputF::placeholder{
font-size: 1em;
text-align:center;
	/* line-height:100px; */
	/* height:100px; */
}

.deplacer_vers{
	width: 2em;
	/* background-color:rgba(230,247,255,0.5); */
		background-color:rgba(132, 225, 225,0.3);
		  /* background-color: rgba(72,209,204,0.1);  */
	border: 1px solid rgba(0,140,205,0.5);
	border-radius: 10%;
	padding:10px;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	/* line-height:100px; */
	/* height:100px; */
}
.deplacer_vers_apres{
	width: 2em;
	background-color:rgba(230,247,255,0.8);
			/* background-color:pink; */
	border: 1px solid rgba(0,140,205,0.5);
	border-radius: 10%;
	padding:10px;
	font-weight:bold;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	/* line-height:100px; */
	/* height:100px; */
}
.deplacer_vers_apres2{
	/* width: 4em; */
	/* background-color:lightcyan; */
	background-color:rgba(230,247,255,0.8);
	border: 1px solid rgba(0,140,205,0.8);
	border-radius: 10%;
	padding:10px;
	/* line-height:100px; */
	/* height:100px; */
		 /* display: inline-block; */
	vertical-align:1.5em;
}
.deplacer_vers_apresG{
	width: 2em;
	/* background-color:rgb(255, 180, 153); */
	border: 1px solid rgba(0,140,205,0.5);
	border-radius: 10%;
	padding:10px;
	font-weight:bold;
	display:inline-flex;
	justify-content:center;
	align-items:center;
}

/* .adeplacer { */
  /* width: 2em; */
  /* background-color: rgba(72,209,204,0.7); */
  /* border-radius: 0%; */
  /* display: inline-block; */
  /* text-align:center; */
  /* padding:10px; */
  /* margin: 0px 10px 0px 10px; */
/* } */

/* .deplacer_vers{ */
	/* width: 2em; */
	/* background-color: rgba(72,209,204,0.3); */
	/* border-radius: 10%; */
	/* padding:10px; */
	/* line-height:100px; */
	/* height:100px; */
/* } */

/* .deplacer_vers_chgt{ */
	/* width: 2em; */
	/* background-color: chartreuse; */
	/* border-radius: 10%; */
	/* padding:10px; */
	/* line-height:100px; */
	/* height:100px; */
/* } */